import {LitElement, html} from "lit";

class LitForm extends LitElement {
    static properties = {
        value: {
            type: Object,
            reflect: true,
        },
    }
    // static get properties() {
    //     return {
    //         value: {}
    //     }
    // }

    constructor() {
        super();
        console.log(this.value);
    }

    updated(changedProperties) {
        super.updated(changedProperties);
        if(this.value){
            this._setValue(this.value);
        }
    }

    _setValue(value) {
        this.updateComplete.then(() => {
            console.log('form update complete');
            this.inputs.forEach(input => {
                input.value = value[input.fieldName];
            });
        });
    }

    get inputs() {
        return this.querySelectorAll("lit-input");
    }

    render() {
        console.log("form render");
        return html`
            <form .value="${this.value}">
                <slot></slot>
            </form>
        `
    }
}

customElements.define('lit-form', LitForm);

export default LitForm;

